import React from 'react'
import { Register } from '../request/api'
import { useNavigate,Link } from 'react-router-dom'
import { Toast } from "antd-mobile";
import { useState } from 'react'
import '../assets/css/register.css'
export default function Registers() {
    let nav = useNavigate()
     const [user,setuser] =useState({
          phone: "",
          nickname: "",
          password: ""
 })

  function  yesRegister() {
    if (
     user.password === "" ||
      user.phone === "" ||
     user.nickname === ""
    ) {
      Toast.show({
        content: "不能为空",
      });

      return;
    }

    let str = /^1[3-9]\d{9}$/;

    if (!str.test(user.phone)) {
      Toast.show({
        content: "手机号格式不对",
      });

      return;
    }

    Register(user).then((res) => {
      console.log(res);
      Toast.show({
        content: res.msg,
      });

      if (res.code === 200) {
        nav('/login')
      }
    });
  }

  function register(type, e) {
      setuser(
       {
        ...user,
        [type]: e.target.value,
      },
    )
  }

    return (<div id="page">
        {/* <!-- 头部 --> */}
        <header>
            {/* <!-- 顶部信息 --> */}
            <div className="top_box">
                {/* <!-- 左箭头图标 --> */}
                <span className="iconfont icon-zuojiantou"></span>
                <h2>注册</h2>
                {/* <!-- 更多图标 --> */}
                <div className="more">
                    {/* <!-- ...图标 --> */}
                    <span className="iconfont icon-gengduo">
                    </span>
                    {/* <!-- 竖线 --> */}
                    <div className="line"></div>
                    // {/* <!-- 小圆圈 --> */}
                    <span className="iconfont icon-xiaoyuandian"></span>
                </div>
            </div>
        </header>
        <div className="boxxx3">

            <div className="q"><img src={require("../assets/images/piclogoorange.png")} alt="" /></div>
            <input
                type="tel"
                placeholder="手机号"
                value={user.phone}
                onChange={register.bind(this, "phone")}
            />
            <br />
            <input
                type="tel"
                placeholder="昵称"
                value={user.nickname}
                onChange={register.bind(this, "nickname")}
            />
            <br />
            <input
                type="text"
                placeholder="密码"
                value={user.password}
                onChange={register.bind(this, "password")}
            />

            <button className="wwww"   onClick={(e) => yesRegister(e)}>注册</button>
            <p className='zhuce'> <Link to='/login'>有账号，去登录</Link> </p>
        </div>

    </div>
    )
}


